<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">Clock</h1>
        <div class="entry">
            <p>Clock displays server or client datetime live. AutoSync feature in server mode can sync the 
            clock with server periodically.</p>
            
            <h:form>
            
                <h3>Client</h3>
                <p:clock />

                <h3>Server</h3>
                <p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server" />
            
            </h:form>
          
            <h3>Source</h3>
            <p:tabView>
                <p:tab title="clock.xhtml">
                    <pre name="code" class="xml">
&lt;h3&gt;Client&lt;/h3&gt;
&lt;p:clock /&gt;

&lt;h3&gt;Server&lt;/h3&gt;
&lt;p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server" /&gt;
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
